<template>
    <div class="margin-bottom-15">
        <vxe-table border 
            :data="tableData"
        >
            <vxe-column field="name" title="名称" align="center"></vxe-column>
            <vxe-column field="code" title="编码" align="center"></vxe-column>
            <vxe-column field="num" title="数量" align="center"></vxe-column>
        </vxe-table>
    </div>
    <div class="margin-bottom-15">
        <vxe-grid 
            ref="xGrid"
            v-bind="gridOption"
        >

        </vxe-grid>
    </div>
</template>
<script setup lang='ts'>
    import {reactive} from 'vue'
    import {VxeGridProps} from 'vxe-table'

    interface list {
        name:string,
        code: string,
        num: number
    }
    const tableData = reactive<Array<list>>(
        [
           { 
                name: 'kino',
                code: '20220927',
                num: 800
           }
        ]
    )
    // interface columnsObj{
    //     title: string,
    //     field: string,
    //     align: string        
    // }
    // let columns = reactive<Array<columnsObj>>(
    //     [
    //         {
    //             title: '国家名称',
    //             field: 'country',
    //             align: 'center',                
    //         },
    //         {
    //             title: '面积',
    //             field: 'area',
    //             align: 'center'
    //         },
    //         {
    //             title: '人口',
    //             field: 'peopleNum',
    //             align: 'center'
    //         }
    //     ]
    // )

    let gridOption = reactive<VxeGridProps>({
        border: true,
        align: 'center',
        columnConfig:{
            resizable: true
        },
        columns:[
            {
                title: '国家名称',
                field: 'country',
                align: 'center',                
            },
            {
                title: '面积',
                field: 'area',
                align: 'center'
            },
            {
                title: '人口',
                field: 'peopleNum',
                align: 'center'
            }
        ]
    })



</script>
<style lang='scss' scoped>
</style>